<template>
  <div class="dashboard" style="margin-left: -15px; margin-top: -20px">
    <!-- 左侧信息栏 -->
    <div >
      <el-card>
        <div class="company-info">
          <!-- 左侧内容 -->
          <div class="company-left">
            <i class="el-icon-user" style="font-size: 70px;"></i>
          </div>
          <!-- 右侧内容 -->
          <div class="company-right" style="text-align: left;  margin: 0 0 0 10px;">
            <h3 style="font-size: 20px;margin-top: 10px">{{this.user.department}} <el-tag>{{this.user.menus ? this.user.menus[0].menuName : '暂无'}}</el-tag></h3>
            <p style="font-size: 14px; margin-top: 10px">登录账号：{{this.user.username}}</p>
            <p style="font-size: 14px; margin-top: 10px">最近登录：{{this.user.lastTime}}</p>
          </div>
        </div>
        <el-button type="primary" size="small" style="margin-top: 10px; width: 300px" @click="goToConsole()">账户信息维护</el-button>
      </el-card>
      <el-card style="margin-top: 20px;">
        <div class="statistics">
          <div>
            <p>报名项目</p>
            <h2>{{ this.enrollCount }}</h2>
          </div>
          <div>
            <p>中标项目</p>
            <h2>{{ this.winCount }}</h2>
          </div>
          <div>
            <p>中标金额</p>
            <h2>{{ this.totalCount }}</h2>
          </div>
        </div>

        <div class="progress" style="margin-top: 60px">
          <el-progress :percentage="this.rate" type="circle" color="#409EFF"></el-progress>
          <p>中标率</p>
        </div>
      </el-card>
    </div>

    <!-- 右侧主要内容 -->
    <div class="main-panel">
      <!-- 待办事项 -->
      <div  style="margin-top: -20px; height: 300px; margin-bottom: 20px">
        <h4 style="margin-bottom: 10px;">待办事项</h4>
        <div style="display: flex; margin-left: -20px">
          <h5 style="margin-left: 20px">代办内容</h5>
          <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入" v-model="message"></el-input>
          <h5 style="margin-left: 30px">状态</h5>
          <el-select v-model="isRead" placeholder="请选择" style="margin-top: -5px;margin-left: 10px; width: 120px">
            <el-option :key="-1" :label="'全部'" :value="-1"></el-option>
            <el-option :key="1" :label="'已读'" :value="1"></el-option>
            <el-option :key="0" :label="'未读'" :value="'0'"></el-option>
          </el-select>
          <el-button type="primary" style="margin-top: -5px; margin-left: 30px" icon="el-icon-search" @click="init">查询</el-button>
          <el-button type="warning" style="margin-top: -5px; margin-left: 10px" icon="el-icon-search" @click="reset">重置</el-button>
        </div>
        <el-table :data="notifications" border style="max-height: 250px; margin-top: 10px; width: 100%">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column label="序号" width="45">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="事项来源" width="80"></el-table-column>
          <el-table-column prop="message" label="待办内容">
            <template slot-scope="scope">
              <span :style="scope.row.isRead === 1 ? { color: '#dcdcdc' } : {}">
                {{ scope.row.message }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="timestamp" label="发送时间" width="150"></el-table-column>
          <el-table-column prop="handleStatus" label="处理状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.handleStatus === 0">未处理</el-tag>
              <el-tag v-else-if="scope.row.handleStatus === 1">已处理</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button size="mini" type="text"  @click="viewNotification(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 公告清单 -->
      <div  style="margin-bottom: 10px; height: 200px; margin-top: 10px">
        <h4 style="margin-bottom: 10px;">公告清单</h4>
        <el-table :data="announcements" border style="width: 100%; max-height: 250px;">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="announcementName" label="公告名称"></el-table-column>
          <el-table-column prop="projectNumber" label="项目编号"></el-table-column>
          <el-table-column prop="projectType" label="项目类型" width="80"></el-table-column>
          <el-table-column prop="budget" label="预算 (万元)" width="100"></el-table-column>
          <el-table-column prop="announDate" label="公告时间"></el-table-column>
          <el-table-column label="操作" width="80">
            <template>
              <router-link :to="'/announclist'" >
                <el-button size="mini" type="text" >查看</el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
<!--      查看待办事项-->
      <el-dialog :visible.sync="notifiVisible" :width="'40%'">
        <div style="margin-top: -30px;">
          <el-descriptions title="待办事项详细" style="display: inline-block; " column="1" border>
            <el-descriptions-item label="事项来源">{{lookNotifications.type}}</el-descriptions-item>
            <el-descriptions-item label="代办内容">{{lookNotifications.message}}</el-descriptions-item>
          </el-descriptions>
          <br>
          <el-button type="primary" style="margin-top: 20px" @click="handleEnsure">确定已处理</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import {
  addNotification,
  getAdCountByDepartment,
  getProjectPageByStatusSpace, getTotalAmountByDepartmentName,
  getWinnotiProjectCount, getWinnotiProjectCountByDepartment
} from "@/api/project";
import {getAnnouncementsByProjectNumbers} from "@/api/announcement";

import {getNotificationsPage} from "@/api/other";

export default {
  data() {
    return {
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      message: '',
      isRead: -1,
      procurementMethod:'',
      projectNumber: "",
      projectName: "",
      pageNum: 1,
      total: 0,
      pageSize: 5,
      updateStatus: {},
      stompClient: null, // 通知工具
      notifications: [], // 用于存储接收到的通知
      lookNotifications: [], // 用于存储点击查看之后显示数据
      notifiVisible: false,
      announcements: [],
      enrollCount: 0,
      winCount: 0,
      totalCount: 0,
      rate: 0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init(){
      await getProjectPageByStatusSpace(this.pageNum, this.pageSize,this.projectNumber,this.projectName,this.procurementMethod,1,1)
          .then(res => {
            //根据项目编号查询公告信息
            const projects = res.records;
            const projectNumbers = projects.map(project => project.projectNumber);

            getAnnouncementsByProjectNumbers(projectNumbers).then(announcements => {
              // 将公告信息添加到每个项目中
              projects.forEach(project => {
                const announcement = announcements.find(a => a.projectNumber === project.projectNumber);
                project.announcementName = announcement ? announcement.announcementName : "无公告";
                const startTime = announcement ? announcement.announcementStartTime : "无公告";
                const endTime = announcement ? announcement.announcementEndTime : "无公告";
                if (startTime && endTime) {
                  project.announDate =`${startTime} - ${endTime}`;
                }
              });
              this.announcements = projects;
              this.total = res.total;
            });
          });
      await getNotificationsPage(this.pageNum, this.pageSize,this.user.department,this.message,this.isRead).then(res => {

        this.notifications = res.records;
        this.notifications.forEach(t => {
          t.timestamp = this.formattedDate(t.timestamp);
        });
      });
      await getAdCountByDepartment(this.user.department).then(res => {
        this.enrollCount = res;
      });
      await getWinnotiProjectCountByDepartment(this.user.department).then(res => {
        this.winCount = res;
      });
      await getTotalAmountByDepartmentName(this.user.department).then(res => {
        this.totalCount = res;
      });
      this.rate = this.winCount / this.enrollCount * 100
    },
    formattedDate(rawDate) {
      // 创建一个新的 Date 对象
      const date = new Date(rawDate);

      // 使用 toLocaleString() 格式化日期
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      });
    },
    async viewNotification(notification) { // 查看通知
      this.lookNotifications = notification;
      this.updateStatus = this.lookNotifications;
      delete this.updateStatus.timestamp;
      this.updateStatus.isRead = 1;
      await addNotification(this.updateStatus);
      this.notifiVisible = true;
      this.init();
    },
    handleEnsure() {
      this.updateStatus.handleStatus = 1
      addNotification(this.updateStatus)
      this.notifiVisible = false;
      this.init();
    },
    goToConsole(row){
      this.$router.push({
        path: '/companyinformation',
        query: { row } // 通过 query 参数传递
      });
    },
    reset() {
      this.message = ''
      this.isRead = -1
      this.init();
    },
  }
};
</script>


<style scoped>
.dashboard {
  display: flex;
  padding: 20px;
}
.left-panel {
  width: 350px;
  padding: 20px;
  background-color: #f9f9f9;
  border-right: 1px solid #e0e0e0;
}
.company-info {
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  padding: 10px;
  border: 1px solid #e0e0e0; /* 添加边框用于显示布局 */
  border-radius: 5px;
}
.company-left {
  align-items: center;
  gap: 20px; /* 左右内容的间距 */
}
.company-right {
  text-align: left;
}
.company-right p {
  margin: 0; /* 移除段落默认外边距 */
}
.statistics {
  display: flex;
  flex-direction: column; /* 设置为垂直排列 */
  gap: 20px; /* 设置每个块之间的间距 */
  margin-bottom: 20px;
}
.statistics div {
  display: flex; /* 设置每个块内部为水平排列 */
  align-items: center; /* 垂直居中对齐 */
  gap: 30px; /* 控制 p 和 h2 之间的水平间距 */
}
.statistics p {
  margin: 0; /* 去掉默认的外边距 */
  font-size: 16px; /* 调整字体大小 */
}
.statistics h2 {
  margin: 0; /* 去掉默认的外边距 */
  font-size: 24px; /* 数字字体大小 */
  font-weight: bold; /* 加粗数字 */
}
.progress {
  text-align: center;
}
.main-panel {
  flex: 1;
  padding: 20px;
}
.custom-avatar .el-icon-user {
  font-size: 80px; /* 设置图标的大小 */
}
</style>

